<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-refund"> 
			<!-- 头部 -->
			<view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">{{getStateText(refundData.state)}}</view>
						<view class="reason">
							<text class="reason-text">{{refundData.statetime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj" v-if="refundData.state != 4">
				{{getStateInfo(refundData.state)}}
			</view>
			<!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交退货,7=第三方退款中 -->
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 0">
				<view class="wanl-gray text-sm">
					<view>
						<text class="wlIcon-dot margin-right-sm"></text>卖家同意或超时未处理，系统将自动确认
					</view>
					<view class="margin-top-xs">
						<text class="wlIcon-dot margin-right-sm"></text>如果退款被拒绝，您可以修改申请重新发起
					</view>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black margin-lr-xs" @tap="closeRefund(refundData.id)">关闭退款</button>
					<button class="cu-btn line-orange" @tap="editRefund(refundData.id)">修改申请</button>
				</view>
			</view>
			
			<view v-if="refundData.state == 1">
				<view class="bg-white solid-top padding-bj receipt">
					<view class="icon">
						<text class="wlIcon-guanzhu1"></text>
					</view>
					<view class="content">
						<view class="flex justify-between">
							<text>收件人：{{refundData.shopConfig.returnName}}</text><text>{{refundData.shopConfig.returnPhoneNum}}</text>
						</view>
						<view class="margin-top-xs">
							<view class="text-cut-2">
								{{refundData.shopConfig.returnAddr}}
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white padding-bj solid-top">
					<view class="wanl-gray text-sm">
						<view>
							<text class="wlIcon-dot margin-right-sm"></text>请勿使用平邮或到付，以免商家无法收到退货
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>请填写真实快递信息，如超时则关闭退款
						</view>
					</view>
				</view>
				<view class="cu-form-group margin-top-bj">
					<view class="title">快递单号：</view>
					<input placeholder="请填写快递单号" name="input" v-model="returnData.express_no"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">快递公司：</view>
					<picker @change="kuaidiChange" :range="refundData.kuaidi" range-key="name">
						<view class="picker">
							{{kuaidiKey>-1?refundData.kuaidi[kuaidiKey].name:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="bg-white padding-bj current">
					<view class="flex justify-end">
						<button class="cu-btn line-orange margin-lr-xs" @tap="toExpress(refundData.id)">确认退货</button>
					</view>
				</view>
			</view>
			<view class="bg-white current" v-if="refundData.state == 6">
				<view class="bg-white solid-top padding-bj">
					退货物流：<text class="wanl-gray">{{refundData.express_name}}({{refundData.express_no}})</text>
				</view>
				<view class="bg-white solid-top padding-bj current">
					<view class="wanl-gray text-sm">
						<view>
							<text class="wlIcon-dot margin-right-sm"></text>如果退款被拒绝，您可以修改申请重新发起
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>卖家超时未处理，系统将自动确认
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white solid-top padding-bj current " v-if="refundData.state == 2">
				<view class="text-sm">
					拒绝理由：<text class="wanl-gray">{{refundData.refuse_content}}</text>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black" @tap="arbitrationRefund(refundData.id)">平台介入</button>
					<button class="cu-btn line-orange margin-left-xs" @tap="editRefund(refundData.id)">修改申请</button>
				</view>
			</view>
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 3">
				<view class="wanl-gray text-sm">
					<view>
						<text class="wlIcon-dot margin-right-sm"></text>客服正在审核退款详情及退款历史记录
					</view>
					<view class="margin-top-xs">
						<text class="wlIcon-dot margin-right-sm"></text>大概1-3个工作日做出答复，请耐心等待
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj flex justify-between align-center" v-if="refundData.state == 4">
				<text>退款总金额</text><text class="text-price wanl-orange">{{refundData.price}}</text>
			</view>
			<view class="bg-white padding-bj margin-top-bj flex justify-between align-center" @tap="refundLog(refundData.id)">
				<text>退款历史</text><text class="wlIcon-fanhui2"></text>
			</view>
			<view class="bg-white padding-bj margin-top-bj">
				退款详情
			</view>
			<view class="padding-bj flex">
				<view class="cu-avatar xl margin-right-bj" :style="{backgroundImage: 'url('+$wanlshop.oss(refundData.goods.image, 70, 70)+')'}"> </view>
				<view class="text-sm" style="width: calc(100% - 128rpx);">
					<view class="margin-bottom-xs">
						
						<view class="text-cut-2">
							<view v-if="refundData.order_type === 'groups'" class="cu-tag sm margin-right-xs bg-gradual-orange radius">
								<text>拼团订单</text>
							</view>
							{{refundData.goods.title}}
						</view>
					</view>
					<view class="wanl-gray">
						规格：{{refundData.goods.difference}}
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj text-sm">
				<view class="item flex">
					<text class="wanl-gray"> 退款类型： </text> <text> {{refundData.type_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款原因： </text> <text> {{refundData.reason_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款金额： </text> <text class="text-price"> {{refundData.price}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 物流状态： </text> <text> {{refundData.expressType_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> 退款时间： </text> <text> {{refundData.createtime_text}} </text>
				</view>
			</view>
			<view class="edgeInsetBottom"> </view>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            refundData: {
                statetime: "",
                goods: {},
            },
            returnData: {
                id: 0,
                express_no: "",
                express_name: "",
            },
            kuaidiKey: -1,
        };
    },
    onLoad(option) {
        console.log(option);
        this.loadData({ id: option.id });
    },
    onBackPress(options) {
        // 1.1.6升级
        if (this.$wanlshop.prePage().route == "pages/user/refund/apply") {
            this.$wanlshop.on("/pages/user");
            return true;
        }
    },
    methods: {
        async loadData(data) {
            await this.$request
                .get("api/wanlshop.refund/getRefundInfo", data)
                .then((res) => {
                    this.refundData = res.data;
                    this.returnData.id = res.data.id;
                    // 时间差的毫秒数
                    if (res.data.state == 0) {
                        var diff =
                            res.data.createtime +
                            res.data.config.autoagree * 86400 -
                            Date.parse(new Date()) / 1000;
                        var days = Math.floor(diff / 86400);
                        var hours = Math.floor((diff % 86400) / 3600);
                        var minutes = Math.floor(((diff % 86400) % 3600) / 60);
                        if (minutes > 0) {
                            this.refundData.statetime = "还剩" + minutes + "分";
                        }
                        if (hours > 0) {
                            this.refundData.statetime =
                                "还剩" + hours + "天" + minutes + "分";
                        }
                        if (days > 0) {
                            this.refundData.statetime =
                                "还剩" +
                                days +
                                "天" +
                                hours +
                                "小时" +
                                minutes +
                                "分";
                        }
                    } else if (res.data.state == 1) {
                        var diff =
                            res.data.agreetime +
                            res.data.config.returntime * 86400 -
                            Date.parse(new Date()) / 1000;
                        var days = Math.floor(diff / 86400);
                        var hours = Math.floor((diff % 86400) / 3600);
                        var minutes = Math.floor(((diff % 86400) % 3600) / 60);
                        if (minutes > 0) {
                            this.refundData.statetime = "还剩" + minutes + "分";
                        }
                        if (hours > 0) {
                            this.refundData.statetime =
                                "还剩" + hours + "天" + minutes + "分";
                        }
                        if (days > 0) {
                            this.refundData.statetime =
                                "还剩" +
                                days +
                                "天" +
                                hours +
                                "小时" +
                                minutes +
                                "分";
                        }
                    } else if (res.data.state == 2) {
                        this.refundData.statetime = res.data.rejecttime_text;
                    } else if (res.data.state == 6) {
                        var diff =
                            res.data.returntime +
                            res.data.config.receivingtime * 86400 -
                            Date.parse(new Date()) / 1000;
                        var days = Math.floor(diff / 86400);
                        var hours = Math.floor((diff % 86400) / 3600);
                        var minutes = Math.floor(((diff % 86400) % 3600) / 60);
                        if (minutes > 0) {
                            this.refundData.statetime = "还剩" + minutes + "分";
                        }
                        if (hours > 0) {
                            this.refundData.statetime =
                                "还剩" + hours + "天" + minutes + "分";
                        }
                        if (days > 0) {
                            this.refundData.statetime =
                                "还剩" +
                                days +
                                "天" +
                                hours +
                                "小时" +
                                minutes +
                                "分";
                        }
                    } else if (res.data.state == 3) {
                        this.refundData.statetime = "等待平台处理";
                    } else if (res.data.state == 4) {
                        this.refundData.statetime = res.data.completetime_text;
                    } else if (res.data.state == 5) {
                        this.refundData.statetime = res.data.closingtime_text;
                        // 1.1.6升级
                    } else if (res.data.state == 7) {
                        this.refundData.statetime = "预计24小时内原路返还";
                    } else if (res.data.state == 8) {
                        this.refundData.statetime = "请联系平台客服处理";
                    }
                });
        },
        getStateText(state) {
            return [
                "等待卖家同意",
                "等待买家退货",
                "卖家拒绝退款",
                "平台介入",
                "退款完成",
                "退款关闭",
                "等待卖家收取退货",
                "第三方支付退款中",
                "退款失败",
            ][state];
        },
        getStateInfo(state) {
            return [
                "您已成功发起退款，等待卖家同意",
                "您发起的退款卖家已同意，请退货",
                "您可以修改退货申请再次发起",
                "您已申请平台介入，请等待平台对此判定",
                "退款完成",
                "您已关闭本次退款申请",
                "如果商家确认收到货物，并核查没有问题，将退款给您",
                "因第三方快捷支付订单，退款将在24小时内原路返还",
                "快捷支付退款失败，请联系商家",
            ][state];
        },
        kuaidiChange(e) {
            this.kuaidiKey = e.detail.value;
            this.returnData.express_name =
                this.refundData.kuaidi[e.detail.value].code;
        },
        // 退款历史
        refundLog(id) {
            this.$wanlshop.to(`/yCreate/pages/log?id=${id}`);
        },
        // 平台介入
        async arbitrationRefund(id) {
            await this.$request
                .get("api/wanlshop.refund/arbitrationRefund", { id: id })
                .then((res) => {
                    this.loadData({ id: id });
                });
        },
        // 关闭退款
        async closeRefund(id) {
            await this.$request
                .get("api/wanlshop.refund/closeRefund", { id: id })
                .then((res) => {
                    this.$store.commit("statistics/order", {
                        customer:
                            this.$store.state.statistics.order.customer - 1,
                    });
                    this.loadData({ id: id });
                });
        },
        // 提交物流
        toExpress() {
            if (!this.returnData.express_no) {
                this.$wanlshop.msg("运单号不能为空");
                return false;
            }
            if (!this.returnData.express_name) {
                this.$wanlshop.msg("请选择快递公司");
                return false;
            }
            this.$request
                .post("api/wanlshop.refund/toExpress", this.returnData)
                .then((res) => {
                    this.loadData({ id: res.data });
                });
        },
        // 修改退款
        editRefund(id) {
            uni.redirectTo({
                url: `/yCreate/pages/edit?id=${id}`,
            });
        },
    },
};
</script>

<style>
.wanl-refund .header {
    width: 100%;
    height: 180rpx;
    position: relative;
    background-color: #f72b36;
}

.wanl-refund .header .img-bg {
    width: 100%;
    height: 180rpx;
}

.wanl-refund .header .content {
    width: 100%;
    height: 180rpx;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60rpx;
    box-sizing: border-box;
}

.wanl-refund .header .status-text {
    font-size: 34rpx;
    line-height: 34rpx;
    color: #fefefe;
}

.wanl-refund .header .reason {
    font-size: 24rpx;
    line-height: 24rpx;
    color: rgba(254, 254, 254, 0.75);
    padding-top: 15rpx;
    display: flex;
    align-items: center;
}

.wanl-refund .header .reason-text {
    padding-right: 12rpx;
}

.wanl-refund .header .status-img {
    width: 100rpx;
    height: 100rpx;
    display: block;
}

.wanl-refund .current .cu-btn {
    width: 140rpx;
    font-size: 26rpx;
    padding: 0 12rpx;
}
.wanl-refund .receipt {
    display: flex;
    align-items: center;
}

.wanl-refund .receipt .icon {
    margin-right: 25rpx;
    font-weight: bold;
}
.wanl-refund .receipt .content {
    flex: 1;
}

.wanl-refund .cu-form-group .title {
    padding-right: 25rpx;
    font-size: 28rpx;
    height: 55rpx;
    line-height: 55rpx;
}
.wanl-refund .cu-form-group input {
    font-size: 28rpx;
    color: #555;
    padding-right: 10rpx;
}
</style>
